<template>
  <div>
    <Cuslist></Cuslist>
    <div class="mah4">
      <!-- <div class="placeholder-dev"></div> -->
      <span class="fc-gray60">
        第{{ listState.now1 }} - {{ listState.now2 }}条/总共{{ listState.total }}条</span>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="listState.cur"
        :page-size="listState.size"
        :layout="'prev,pager,next'"
        :total="listState.total">
      </el-pagination>
    </div>
    <div class="mah5">
      <div class="placeholder-dev">
        <StatusBar :arr="[
          listState.total,
          listState.maopao,
          listState.unmaopao,
          listState.ratemaopao,
        ]"></StatusBar>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';

export default {
  components: {
    // 'AreaApp':()=>{return import('./L_AreaApp/index.vue') },
    'Cuslist':()=>{return import('./3_Cuslist.vue') },
    // 'AreaApp':()=>{return import('./L_AreaApp/index.vue') },
    'StatusBar':()=>{return import('./5_statusBar.vue') },
  },
  computed: {
    ...mapState([
      'customerList',
    ]),
    listState: function () {
      let so = this.customerList.pages;
      return {
        cur:so.current,//目前第几页
        size:so.size,//每页几条
        now1:(so.current - 1) * so.size + 1,//当前是第几条起
        nor2:Math.min((so.current * so.size), so.total),//当前是第几条止
        total:so.total,//当前是共几条
        maopao:so.maopao,//冒泡数
        unmaopao:so.total - so.maopao,//未冒泡数
        ratemaopao:`${((so.maopao / Math.max(so.total, 1)) * 100).toFixed(2)}%`//冒泡率
      }
    }
  },
  data() {
    return {
      isDev: process.env.NODE_ENV == 'development',
    }
  },
  watch: {
  },
  methods: {
    test:function(){
    },
    handleCurrentChange: function (current) {
      console.log('%c [ current ]-78', 'font-size:13px; background:pink; color:#bf2c9f;', current)
      
      // let opt = this.$store.getters.getPages;
      // console.log(opt)
      // , Object.assign(opt, { isOutpage: false, state: 1, }));//一般需要带上page参数
      this.$store.dispatch('customerList/updata')

    },
  },
  mounted: function () {
  },
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import url('./index.less');
</style>